<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>智能农业监控平台 - 主页</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#22c55e', // 绿色主色调，代表农业
            secondary: '#0ea5e9', // 蓝色辅助色，代表科技
            neutral: '#f3f4f6', // 中性色
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
      .sensor-value {
        @apply text-xl font-semibold;
      }
      .grow-status {
        @apply p-4 rounded-lg bg-gradient-to-r from-green-100 to-blue-100 border border-gray-200;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-sans">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-md fixed w-full top-0 z-50 transition-all duration-300" id="main-header">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-leaf text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-gray-800">智能农业监控平台</h1>
      </div>
      
      <div class="flex items-center space-x-6">
        <a href="dashboard.html" class="text-primary font-medium">主页</a>
        <a href="analytics.html" class="text-gray-600 hover:text-primary transition-colors">数据分析</a>
        <a href="settings.html" class="text-gray-600 hover:text-primary transition-colors">设置</a>
        <div class="relative">
          <button class="flex items-center space-x-1">
            <i class="fa fa-user-circle text-gray-600"></i>
            <span class="text-sm font-medium">管理员</span>
          </button>
        </div>
      </div>
    </div>
  </header>

  <!-- 主要内容区域 -->
  <main class="container mx-auto pt-24 pb-12 px-4">
    <!-- 顶部状态卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div class="bg-white rounded-xl p-6 card-shadow transform hover:scale-105 transition-transform duration-300">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">当前温度</p>
            <p id="temp" class="sensor-value text-primary">25°C</p>
          </div>
          <div class="bg-primary/10 p-3 rounded-full">
            <i class="fa fa-thermometer-half text-primary text-xl"></i>
          </div>
        </div>
        <div class="mt-4 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
          <div class="h-full bg-primary rounded-full" style="width: 65%"></div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl p-6 card-shadow transform hover:scale-105 transition-transform duration-300">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">空气湿度</p>
            <p id="humidity" class="sensor-value text-secondary">65%</p>
          </div>
          <div class="bg-secondary/10 p-3 rounded-full">
            <i class="fa fa-tint text-secondary text-xl"></i>
          </div>
        </div>
        <div class="mt-4 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
          <div class="h-full bg-secondary rounded-full" style="width: 65%"></div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl p-6 card-shadow transform hover:scale-105 transition-transform duration-300">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">土壤水分</p>
            <p id="soil-moisture" class="sensor-value text-blue-500">45%</p>
          </div>
          <div class="bg-blue-500/10 p-3 rounded-full">
            <i class="fa fa-tint text-blue-500 text-xl"></i>
          </div>
        </div>
        <div class="mt-4 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
          <div class="h-full bg-blue-500 rounded-full" style="width: 45%"></div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl p-6 card-shadow transform hover:scale-105 transition-transform duration-300">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">光照强度</p>
            <p id="light" class="sensor-value text-yellow-500">500 lux</p>
          </div>
          <div class="bg-yellow-500/10 p-3 rounded-full">
            <i class="fa fa-sun-o text-yellow-500 text-xl"></i>
          </div>
        </div>
        <div class="mt-4 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
          <div class="h-full bg-yellow-500 rounded-full" style="width: 75%"></div>
        </div>
      </div>
    </div>
    
    <!-- 中间区域：地图和图表 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 左侧：作物生长状态 -->
      <div class="lg:col-span-1 space-y-6">
        <div class="bg-white rounded-xl p-6 card-shadow">
          <div class="flex justify-between items-center mb-4">
            <h3 class="font-semibold text-lg">作物生长状态</h3>
            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">健康</span>
          </div>
          <div class="grow-status">
            <p id="crop-status" class="text-gray-700">当前处于开花期，长势良好。预计7天后进入结果期。</p>
          </div>
          <div class="mt-6">
            <h4 class="text-sm font-medium text-gray-500 mb-2">生长阶段</h4>
            <div class="flex justify-between items-center">
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
                  <i class="fa fa-seedling text-gray-400"></i>
                </div>
                <p class="text-xs mt-1">播种</p>
              </div>
              <div class="flex-1 h-1 bg-gray-200 mx-2">
                <div class="h-full bg-primary" style="width: 75%"></div>
              </div>
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
                  <i class="fa fa-leaf text-gray-400"></i>
                </div>
                <p class="text-xs mt-1">发芽</p>
              </div>
              <div class="flex-1 h-1 bg-gray-200 mx-2">
                <div class="h-full bg-primary" style="width: 75%"></div>
              </div>
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
                  <i class="fa fa-pagelines text-white"></i>
                </div>
                <p class="text-xs mt-1">开花</p>
              </div>
              <div class="flex-1 h-1 bg-gray-200 mx-2">
                <div class="h-full bg-gray-200" style="width: 100%"></div>
              </div>
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
                  <i class="fa fa-apple text-gray-400"></i>
                </div>
                <p class="text-xs mt-1">结果</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl p-6 card-shadow">
          <h3 class="font-semibold text-lg mb-4">灌溉计划</h3>
          <div class="space-y-4">
            <div class="flex items-center p-3 border-l-4 border-primary bg-green-50 rounded-r">
              <i class="fa fa-calendar-check-o text-primary mr-3"></i>
              <div>
                <p class="font-medium">今日灌溉</p>
                <p class="text-sm text-gray-500">10:00 - 10:30 (已完成)</p>
              </div>
            </div>
            <div class="flex items-center p-3 border-l-4 border-yellow-500 bg-yellow-50 rounded-r">
              <i class="fa fa-calendar text-yellow-500 mr-3"></i>
              <div>
                <p class="font-medium">明日灌溉</p>
                <p class="text-sm text-gray-500">16:00 - 16:30 (计划中)</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 中间：地图 -->
      <div class="lg:col-span-2 bg-white rounded-xl p-6 card-shadow h-[500px]">
        <div class="flex justify-between items-center mb-4">
          <h3 class="font-semibold text-lg">农田分布地图</h3>
          <div class="flex space-x-2">
            <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded transition-colors">
              <i class="fa fa-refresh mr-1"></i>刷新
            </button>
            <button class="text-xs bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1 rounded transition-colors">
              <i class="fa fa-plus mr-1"></i>添加农田
            </button>
          </div>
        </div>
        <div id="map" class="w-full h-[420px] rounded-lg border border-gray-200"></div>
      </div>
    </div>
    
    <!-- 底部：统计图表 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
      <div class="bg-white rounded-xl p-6 card-shadow">
        <h3 class="font-semibold text-lg mb-4">温度变化趋势</h3>
        <div id="temp-chart" class="w-full h-[300px]"></div>
      </div>
      
      <div class="bg-white rounded-xl p-6 card-shadow">
        <h3 class="font-semibold text-lg mb-4">湿度变化趋势</h3>
        <div id="humidity-chart" class="w-full h-[300px]"></div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-gray-800 text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h4 class="text-lg font-semibold mb-4">智能农业监控平台</h4>
          <p class="text-gray-400 text-sm">利用现代科技，助力农业生产智能化、高效化。</p>
        </div>
        <div>
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="space-y-2 text-gray-400">
            <li><a href="#" class="hover:text-white transition-colors">首页</a></li>
            <li><a href="#" class="hover:text-white transition-colors">数据监控</a></li>
            <li><a href="#" class="hover:text-white transition-colors">分析报告</a></li>
            <li><a href="#" class="hover:text-white transition-colors">系统设置</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-lg font-semibold mb-4">联系我们</h4>
          <ul class="space-y-2 text-gray-400">
            <li><i class="fa fa-envelope mr-2"></i>support@example.com</li>
            <li><i class="fa fa-phone mr-2"></i>400-123-4567</li>
            <li><i class="fa fa-map-marker mr-2"></i>北京市海淀区科技园区</li>
          </ul>
        </div>
        <div>
          <h4 class="text-lg font-semibold mb-4">关注我们</h4>
          <div class="flex space-x-4">
            <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-qq"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
        <p>© 2025 智能农业监控平台 版权所有</p>
      </div>
    </div>
  </footer>

  <script src="js/chart.js"></script>
  
  <script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
      const header = document.getElementById('main-header');
      if (window.scrollY > 10) {
        header.classList.add('py-2');
        header.classList.remove('py-3');
      } else {
        header.classList.add('py-3');
        header.classList.remove('py-2');
      }
    });
  </script>
</body>
</html>